<template>
	<view class="form">
		<uni-section title="造梦师信息" sub-title="" type="line">
			<uni-forms ref="form" :model="model" :rules="rules">
				<uni-forms-item name="plannerPhoto">
					<view class="center">
						<image v-if="model.plannerPhoto" :style="{ width: '100px' }" :src="model.plannerPhoto" mode="widthFix"></image>
						<view>
							<button size="mini" type="primary" @click="onSelectImage">上传头像</button>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="昵称" name="plannerName" required>
					<uni-easyinput  v-model="model.plannerName" placeholder="" />
				</uni-forms-item>
				<uni-forms-item label="简介" name="plannerBrief" required>
					<uni-easyinput  v-model="model.plannerBrief" placeholder="" />
				</uni-forms-item>
				<uni-forms-item>
					<view class="center">
						<button size="mini" type="primary" @click="onSaveUserInfo">提交</button>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { plannerInfoApply } from '../../api/planner.js'
import { fileUpload } from '../../api/util.js'

const form = ref({})
const model = ref({})
const rules = {
	plannerName: {
		rules: [{
			required: true,
			errorMessage: '昵称不能为空'
		}]
	},
	plannerBrief: {
		rules: [{
			required: true,
			errorMessage: '简介不能为空'
		}]
	},
	plannerPhoto: {
		rules: [{
			required: true,
			errorMessage: '请上传头像'
		}]
	}
}


const onSelectImage = () => {
	uni.chooseImage({
		count: 1,
		success (res) {
			const { tempFilePaths  } = res
			fileUpload(tempFilePaths[0], ({ url }) => {
				model.value.plannerPhoto = url
			})
		}
	})
}

const onSaveUserInfo = () => {
	form.value.validate().then(async res => {
		const { success, data } = await plannerInfoApply(model.value)
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}).catch(err => {
		uni.showToast({
			title: '输入有误'
		})
	})
}
</script>

<style scoped lang="scss">
.form {
	padding: .1rem .5rem;
}
.form-button {
	margin: .2rem;
}
.center {
	text-align: center;
}
</style>
